<template>
  <div>
    <a-upload
      list-type="picture-card"
      action="/file/api/v1/site/upload/inline"
      name="files"
      :file-list="fileList"
      accept=".jpg, .jpeg, .png, .bmp, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .pdf, .zip, .rar"
      :multiple="true"
      @preview="handlePreview"
      @change="handleUpChange"
      :remove="remove"
      class="uploadImg"
      :class="`${fileList.length < num ? 'zhanshi' : 'yincang'}`"
    >
      <div v-if="fileList.length < num">
        <slot />
        <!-- <a-icon type="plus" />
        <div class="ant-upload-text">
          <slot name="prompt" />
        </div> -->
      </div>
    </a-upload>
    <a-modal :visible="previewVisible" :footer="null" @cancel="previewVisible = false">
      <div style="padding: 20px">
        <img alt="example" style="width: 100%" :src="previewImage" />
      </div>
    </a-modal>
  </div>
</template>

<script>
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject(error);
  });
}

export default {
  props: {
    num: {
      type: Number,
      default: 1
    },
    val: {
      type: String,
      default: ""
    }
  },
  computed: {
    token() {
      return this.$store.state.auth.token;
    }
  },
  watch: {
    val: {
      handler(v) {
        if (v) {
          this.fileList = v.split(",").map((item, idx) => ({
            uid: `-${idx + 1}`,
            name: "image.png",
            status: "done",
            url: item
          }));
        } else {
          this.fileList = [];
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      previewImage: "",
      previewVisible: false,
      logo: [],
      fileList: []
    };
  },
  methods: {
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      window.open(`${this.previewImage}?token=${this.token}`);
      // this.previewVisible = true;
    },
    handleUpChange(e) {
      this.fileList = e.fileList;
      if (e.fileList.length === 0) {
        this.fileList = [];
      }
      const doneList = e.fileList.filter((item) => ["done", "error", "removed"].includes(item.status));
      if (doneList.length === e.fileList.length) {
        const logo = [];
        e.fileList.forEach((item, index) => {
          if (item.status === "done") {
            if (item.response && item.response.data && item.response.data[0]) {
              logo.push(item.response.data[0]);
            } else {
              logo.push(item.url);
            }
          }
        });
        this.logo = logo.join(",");
        this.$emit("upData", this.logo);
      }
    },
    remove() {
      this.$emit("upData", "");
    }
  }
};
</script>

<style lang="scss" scoped>
.dnone {
  ::v-deep .ant-form-item-required::before {
    display: none;
  }
}
.uploadImg {
  ::v-deep .ant-upload-select-picture-card {
    background: none;
    border: none;
  }
  ::v-deep .ant-upload {
    padding: 0;
  }
}
.yincang {
  ::v-deep .ant-upload-list-picture-card {
    &::before {
      width: 0 !important;
      height: 0 !important;
    }
  }
}
</style>
